<template>
  <div class="home">
    <main>
      <!-- 位置 -->
      <div class="city-entry" @click="showCity = true">
        {{ cityName }}
        <van-icon name="arrow-down" />
      </div>

      <!-- 分栏 -->
      <div class="mv-tabs">
        <van-tabs v-model="active">
          <!-- 热映 -->
          <van-tab title="热映">
            <hot-view></hot-view>
          </van-tab>

          <van-tab title="影院">
            <!-- 影院列表 -->
            <cinema-view
              :city="city"
              :cinemalist="cinemaList"
              :districtitem="districtItem"
              :subwayitem="subwayItem"
              :branditem="brandItem"
              @business="getNearbyAll"
              @cityId="getNearby"
            ></cinema-view>
          </van-tab>
          <van-tab title="待映">内容 3</van-tab>
          <van-tab title="经典">内容 4</van-tab>
        </van-tabs>
      </div>
      <div class="search"><van-icon name="search" /></div>

      <keep-alive include="city-location">
        <!-- 定位城市 -->
        <city-location
          v-if="showCity"
          @showcity="showCity = $event"
          @city="getCity"
        ></city-location>
      </keep-alive>
    </main>
  </div>
</template>

<script>
import CityLocation from "../components/CityLocation.vue";
import CinemaView from "./CinemaView.vue";
import HotView from "./HotView.vue";
export default {
  components: { HotView, CityLocation, CinemaView },
  data() {
    return {
      active: 0,
      showCity: false, //定位开关
      cinemaList: [], // 影院列表
      cityName: "广州", // 默认城市名
      cityId: 20, // 默认城市id
      city: {
        id: 20,
        nm: "广州",
        py: "guangzhou",
      }, // 默认城市

      // 筛选数据
      district: [], // 行政区
      districtItem: [], // 行政区细分

      subway: [], // 地铁
      subwayItem: [], // 地铁

      brand: [], // 品牌
      brandItem: [], // 品牌

      hallType: [], // 影厅类型
      service: [], // 影院服务

      timeRanges: [], // 时段
    };
  },
  methods: {
    // 获取字组件传过来的城市
    getCity(event) {
      // console.log("城市", event);
      this.city = event;
      this.cityId = event.id;
      this.cityName = event.nm;
      this.getNearby();
      this.getFilterCinemas();
    },
    // 筛选所有附近影院
    getNearbyAll() {
      this.axios
        .get(
          `/index/moreCinemas?day=${this.dayTime}&offset=0&limit=20&item&updateShowDay=true&cityId=${this.cityId}`
        )
        .then((re) => {
          // console.log(re);
          this.cinemaList = re;
        });
    },
    // 请求附近影院
    /**
     * @offset 	分页偏移	number	<0>
     * @limit	分页大小	number	<10>
     * @districtId	行政区		<-1>
     * @stationId		地铁	<-1>
     * @areaId	地区		<-1>
     * @hallType	影厅类型		<-1>
     * @brandId	品牌		<-1>
     * @serviceId	影院服务		<-1>
     * @item			< >
     * @updateShowDay		最新展示日	true
     * @reqId		请求id	1636710166221
     * @cityId	城市id		<1>
     * @lat	纬度		<23>
     * @lng	经度		<113>
     *
     */

    // 通过条件请求数据
    getNearby(event) {
      // console.log(event);
      if (event) {
        this.axios
          .get(
            `/index/moreCinemas?day=${this.dayTime}&offset=0&limit=20&item&updateShowDay=true&cityId=${this.cityId}&${event[0]}=${event[1]}`
          )
          .then((re) => {
            // console.log(re);
            this.cinemaList = re;
          });
      } else {
        this.axios
          .get(
            `/index/moreCinemas?day=${this.dayTime}&offset=0&limit=20&item&updateShowDay=true&cityId=${this.cityId}`
          )
          .then((re) => {
            // console.log(re);
            this.cinemaList = re;
          });
      }
    },

    // 附近影院筛选条件
    getFilterCinemas() {
      this.axios.get(`index/filterCinemas?ci=${this.cityId}`).then((res) => {
        /* 
        
        district: [], // 行政区
        subway: [], // 地铁
        hallType: [], // 影厅类型
        service: [], // 影院服务
        brand: [], // 品牌
        timeRanges: [], // 时段
        */

        this.district = res.district.subItems; // 行政区
        // console.log("行政区", this.district);

        if (this.district) {
          this.getScreenFun(this.district, this.districtItem);
        }

        this.subway = res.subway.subItems; // 地铁
        // console.log("地铁", this.subway);
        if (this.subway) {
          this.getScreenFun(this.subway, this.subwayItem);
        }

        this.brand = res.brand.subItems; // 品牌
        // console.log("品牌", this.brand);
        if (this.brand) {
          this.brand.forEach((item) => {
            this.brandItem.push({
              text: `${item.name}`,
              value: item.id,
            });
          });
        }

        this.hallType = res.hallType.subItems; // 影厅类型
        // console.log("影厅类型", this.hallType);

        this.subway = res.subway.subItems; // 影院服务
        this.timeRanges = res.timeRanges.subItems; // 时段
      });
    },

    // 封装筛选方法
    getScreenFun(data, datalist) {
      var activeId = ""; // 右侧高亮
      var activeIndex = ""; // 左侧高亮
      var text = "";
      var children = [];
      // 行政区
      data.forEach((item) => {
        activeIndex = item.id;
        text = item.name;
        if (item.id == -1) {
          children = [];
          datalist.push({
            activeId,
            activeIndex,
            text,
            children,
          });
        } else {
          // console.log("item.subItems", item.subItems);
          if (item.subItems) {
            item.subItems.forEach((ele) => {
              if (ele.id == -1) {
                children = [];
              } else {
                children.push({
                  text: ele.name,
                  id: ele.id,
                  activeId: ele.id,
                });
              }
            });
          }
          datalist.push({
            activeId,
            activeIndex,
            text,
            children,
          });
        }
      });
    },
  },
  created() {
    this.getNearby();
    this.getFilterCinemas();
  },
};
</script>

<style lang="scss" scoped>
main {
  position: relative;
  background-color: #fff;
  .city-entry {
    position: absolute;
    z-index: 999;
    /* flex: 1; */
    left: 0px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-align: center;
    width: 70px;
  }
  // 分栏
  .mv-tabs {
  }

  // 放大镜
  .search {
    position: absolute !important;
    top: 3px;
    right: 1px;

    width: 45px;
    color: #3c9fe6;
    font-size: 24px;
    text-align: center;
    line-height: 45px;
  }
}
</style>

<style>
main .van-tabs__wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.1rem;
}
main .van-tabs {
  height: 100%;
}
main .van-tab {
  margin-top: 10px;
}
main .van-tabs__line {
  bottom: 0.09rem;
}
main .van-tabs__nav {
  width: 70%;
}
main .van-tab__text {
  font-size: 17px;
  color: #333;
}

main .van-tab--active .van-tab__text--ellipsis {
  font-weight: bold;
}
main .van-tabs__content {
  height: calc(100vh - 0.5rem);
}
main .van-tab__pane {
  height: 100%;
  overflow-y: scroll;
}
</style>


